<template>
    <div id="course-answer">
       <div class="jx-content part2">
            <div class="topcoumt">
                <div class="search-box fl">
                    <el-form :inline="true"  :model="Form"  class="fl">
                        <el-form-item label="关键字">
                            <el-input v-model="Form.name" placeholder="请输入关键字" ></el-input>
                        </el-form-item>
                    </el-form>
                      <button class="button-style" @click="searchFn">搜 索</button>
                 </div>
                  <div class="btn-group fr">
                    <button class="button-style"  @click="myquestion" >我要提问</button>
                </div>
            </div>
            <el-dialog :close-on-click-modal="false" class="dialog-check" title="我要提问" :visible.sync="dialogVisible" width="35%">
               <el-form ref="formlist" :inline="true"  :rules="rules" :model="formlist" >
                    <el-form-item label="问题标题 :" prop="title">
                        <el-input v-model="formlist.title"  placeholder="请输入问题标题" maxlength="100"></el-input>
                    </el-form-item>
                     <div class="answer-editor">
                        <p class="title"><span style="color:#F56C6C; margin-left:-10px">* </span>问题描述 :</p>
                        <mavonEditor ref="question" class='youquestion'></mavonEditor>
                    </div>
               </el-form>
                <div class="btn-center">
                    <button class="button-style" @click="submit('formlist')" >提 交</button>
                </div>
            </el-dialog>
           <div v-if="listansers!=''">
                <div class="listanser">
                    <ul>
                        <li v-for='(item,index) in listansers' :key="index">
                            <div class="fl listanser-list">
                                <div class="fl listanser-list-answer">
                                    <p>{{item.problemCount}}</p>
                                    <p>回答</p>
                                </div>
                                <div class="fl imgpic">
                                    <img :src="item.icon">
                                </div>
                                <div class="fl question-list">
                                    <router-link :to="{path:'/Teaching/MyCourses/Interflow/Answer/AnswerListDetail',query: {id:item.id}}">
                                        <p class="question-list-why">{{item.problemName}}</p>
                                        <div class="question-time">
                                            <div class="fl">
                                                <i class="iconfont  icon-wode"></i>
                                                <span class='stuname'>{{item.userName}}{{item.roleName}}</span>
                                            </div>
                                            <span class='timeicon'>
                                                <i class="iconfont  icon-shijian"></i>
                                                <span>{{item.problemTime}}</span>
                                            </span>
                                        </div>
                                    </router-link>
                                </div>
                            </div>
                             <div class="fr Forbidden" v-if="item.role==2" >
                                <button class="Forbidden-btn" @click="ForbiddeWords(item.userId,item.courseId,item.forbidden,item.userName)" v-if="item.forbidden==false">禁 言</button>
                                <button class="Forbidden-btn-dark" v-if="item.forbidden==true">已 禁 言</button>
                            </div>
                        </li>
                    </ul>
                </div>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
               </el-pagination>
           </div>
           <div class="empty" v-else >
                <img src='../../../assets/images/empty.png'/>
                <p>暂无数据</p>
           </div>
        </div>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    import $ from "jquery";
    export default {
        components: { mavonEditor },
        data () {
            return {
                //课程id
                courseId:'',
                Form:{
                    name:''
                },
                dialogVisible:false,
                formlist:{
                   title:''
                },
                
                forbidden:'',
                listansers:[],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                rules: {
                    title: [
                        { required: true, message: '请输入问题标题', trigger: 'blur' },
                        {  max: 100, message: '长度最多100个字符', trigger: 'blur' }
                    ]
                },

              
            }
        },
        created() {
           this.courseId = this.$localstorage.getLocalStorage('setCourseId')
           this.init()
        },
        methods: {
           
            init() {
                let self = this
                self.$http.get('/tes/problemCommunication/listProblemPages?pageNum='+self.currentPage +'&pageSize='+self.pagesize + '&courseId='+self.courseId+'&keyWords='+self.Form.name).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.listansers = res.data.pageDTO.content
                        self.totalCount = res.data.pageDTO.total
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            setInit(){
                this.$nextTick(item=>{
                this.$refs.question.toolbars= {
                        bold: true, // 粗体
                        italic: false, // 斜体
                        header: true, // 标题
                        quote: true, // 引用
                        ol: true, // 有序列表
                        ul: true, // 无序列表
                        imagelink: true, // 图片链接
                        code: true, // code
                        table: true, // 表格
                        help: true, // 帮助
                        alignleft: true, // 左对齐
                        aligncenter: true, // 居中
                        alignright: true, // 右对齐
                        preview: true // 预览
                    }
                })
            },
            //搜索
            searchFn(){
                this.currentPage = 1
                this.init()
            },
            //我要提问
            myquestion(){
              this.dialogVisible = true
              this.setInit()
              this.formlist.title=''
              this.$nextTick(item=>{
                 this.$refs.question.value=''
              })
              
            },
            //提交
            submit(formlist){
                let self = this
                let answer=this.$refs.question.value
				self.$refs[formlist].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '文件提交中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        self.$http.post('/tes/problemCommunication/askQuestions',{
                            problemName: self.formlist.title,
                            courseId:self.courseId,
                            problemContent:answer,
                            htmlContent: self.$refs.question.getRender()
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                self.$message({
                                    message: '提交成功',
                                    type: 'success'
                                })
                                self.init()
                                self.dialogVisible = false
                                loading.close() 
                            }else{
                                self.$message.error(res.message)
                                loading.close() 
                            }
                        })
                    }
                })
                // let answer=this.$refs.question.renders
                // console.log(this.formlist.title)
                // console.log(answer)
            },

           //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
             //详情
            ForbiddeWords(userId,courseId,forbidden,userName){
                let self = this
                self.$confirm('是否对'+userName+'禁言?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
				self.$http.post('/tes/problemCommunication/forbiddenWords',{
                     userIds:[userId],
                     courseId:courseId,
                     isForbidden:!forbidden
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '禁言成功',
                            type: 'success'
                        })
                       self.init()
                    }else{
                        self.$message.error(res.message)
                    }
                    },(err) => {
						console.log('err');
                    })
                 }).catch(() => {
			   })
            }

        }
    }
</script>
<style scoped>
    .part2{
        box-shadow:0px 0px 0px;
        border-radius:none;
        margin: 0px;
    }
    .el-form-item>>>.el-input__inner{
        width: 300px;
    }
     .youquestion>>>.v-note-wrapper {
        height: 300px;
    } 
</style>

<style lang="scss" scoped>
 @import "./../../../styles/layout/color_variables";
  #course-answer {
    width: $width;
    margin: 0px auto;
    color: #727272;
    .topcoumt{
       //border-bottom:1px solid #e8e8e8;
       overflow: hidden;
       .el-input .el-input__inner{
        width: 300px;
      }
    }
    .dialog-check{
       .el-form-item__content {
            .el-input__inner{
                width: 300px;
            }
        }
        .answer-editor{
            padding: 0 12px;
            .title{
                font-size: 14px;

                line-height: 30px;
            }
        }
        .btn-center{
            text-align: center;
            padding: 20px 0;
        }

    }
    .listanser{
        clear: both;
         ul>li{
            height: 60px;
            border-bottom:1px solid #e8e8e8;
            padding: 20px;
                &:hover{
                    .question-list-why{
                        color:#2b85ed
                    }
                }
                .question-list-why{
                    margin-bottom: 12px;
                    font-size: 16px;
                    overflow: hidden;
                    width: 600px;
                    white-space: nowrap;
                    text-overflow:ellipsis;
                    color: #727272;
                   
                }
             .Forbidden{
                margin-top: 13px;
                margin-right: 30px;
                .Forbidden-btn{
                    width: 65px;
                    height: 25px;
                    border: 1px solid #2b85ed;
                    border-radius: 20px;
                    color: #2b85ed;
                    cursor: pointer;
                }
                .Forbidden-btn-dark{
                     width: 65px;
                    height: 25px;
                    border: 1px solid #999999;
                    border-radius: 20px;
                    color: #999999;
                    cursor: pointer;

                }
           }
        }
        .listanser-list{
           padding-top: 10px;
           .listanser-list-answer{
               color: #2180ec;
               margin-right: 20px;
               margin-top: 10px;
               text-align: center;
               &>p{
                   font-size: $fs16;
                   margin-bottom:5px;
               }
           }
           .imgpic{
               margin-right: 20px;
               img{
                border-radius: 50%;
                width: 50px;
               }
           }
           .question-list{
               margin-top: 4px;
                .question-time{
                    color: #999999;
                    .stuname{
                       color:#999999
                    }
                    .timeicon{
                        margin:0 10px;
                            .times{
                                color:$table-gray;
                            }
                    }
                    .teachername{
                        .teacher{
                            position: relative;
                            right: -25px;
                            color: #fff;
                            font-size: 14px;
                            font-weight: normal
                         }
                        #triangle-left{
                            width:0px;
                            height:0px;
                            border-top:12px solid transparent;
                            border-bottom:12px solid transparent;
                            border-right:16px solid $blue;
                            display:inline-block;
                            vertical-align: middle;
                            margin-left: -23px
                        }
                      .square{
                            width: 35px;
                            height: 24px;
                            background: $blue;
                            display: inline-block;
                            margin-left: -5px;
                            margin-bottom: 0px
                      }
                    }
                    
                }
           }

        }
    }
        .empty{
          padding:100px 0;
          text-align:center;
            p{
                padding: 15px 0;
                color: #666
            }
        }

  }
</style>
